<route lang="json5">
{
  layout: 'none',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '进件模板',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script setup lang="ts">
import { ref } from 'vue'
import { getRegion } from '@/api/common'
import { getMcc } from '@/api/finance'
import upload from '@/components/upload.vue'

const labelWidth = '110px'
const formModel = ref({
  tpl_name: '', // 模板名称
  mch_type: '1', // 商户类型
  email: '', // 商户邮箱
  contact_mobile: '', // 商户手机
  account_type: '', // 银行账户类型
  merchant_name: '', // 公司全称
  merchant_short_name: '', // 店铺名称:mch_type 1 /公司简称：mch_type：2/3
  mcc_code_name: [], // 行业分类
  legal_name: '', // 法人姓名
  id_card_no: '', // 法人身份证号
  id_card_start: '', // 证件有效期始
  id_card_end: '', // 证件有效期止
  province_name: '', // 省份
  city_name: '', // 城市
  area_name: '', // 区县
  address: '', // 经营地址
  bank_card_no: '', // 结算银行卡号
  holder: '', // 开户人姓名
  idcard_back_pic: '', // 法人身份证反面
  idcard_front_pic: '', // 法人身份证正面
  idcard_hand_pic: '', // 法人手持身份证
  bank_card_front_pic: '', // 结算银行卡正面
  cashier_desk_pic: '', // 收银台照片
  door_pic: '', // 店铺门头照
  inside_pic: '', // 店铺室内照
  license_full_name: '', // 营业执照名称
  license: '', // 营业执照注册号
  license_address: '', // 营业执照地址
  license_start: '', // 营业执照有效期始
  license_end: '', // 营业执照有效期止
})
const areaList = ref([])
const mchTypeList = ref([
  {
    label: '小微商户',
    value: '1',
  },
  {
    label: '个体商户',
    value: '2',
  },
  {
    label: '公司商户',
    value: '3',
  },
])
const accountTypeList = ref([
  {
    label: '个人账户',
    value: '1',
  },
  {
    label: '企业（对公）账户',
    value: '2',
  },
])

const longTime = ref(false)
const licenseLongTime = ref(false)
const formRef = ref()
function handleSubmit() {
  formRef.value.validate().then((res) => {
    console.log(res)
  })
}

// 行业类型多列选择器 start
const mccResult = ref()
const mccList = ref<any[]>([])

// 根据code查找子节点，不传code则返回所有节点
function findChildrenByCode(data: any, code?: string): any[] | null {
  if (!code) {
    return data
  }
  for (const item of data) {
    if (item.value === code) {
      return item.children || null
    }
    if (item.children) {
      const childrenResult = findChildrenByCode(item.children, code)
      if (childrenResult) {
        return childrenResult
      }
    }
  }
  return null
}
// 行业类型多列选择器选中的时候，获取下一级数据
function columnChange({ selectedItem, resolve, finish }) {
  const nextLevelData = findChildrenByCode(mccResult.value, selectedItem.value)
  if (nextLevelData && nextLevelData.length) {
    resolve(
      nextLevelData.map((item) => {
        return {
          value: item.value,
          label: item.text,
        }
      }),
    )
  }
  else {
    finish()
  }
}
// 格式化行业类型多列选择器
function displayFormat(selectedItems: Record<string, any>[]) {
  console.log(selectedItems)
  if (selectedItems.length <= 0)
    return ''
  return `${selectedItems[selectedItems.length - 2].label}/${selectedItems[selectedItems.length - 1].label}`
}
// 行业类型多列选择器 end

const region = ref([])
const regionList = ref<any[]>([])
function changeArea({ selectedItem, resolve, finish }) {
  // 获取市区数据
  getRegion().then((res) => {
    if (res && res.length) {
      resolve(
        res.map((item) => {
          return {
            value: item.value,
            label: item.text,
          }
        }),
      )
    }
    else {
      finish()
    }
  })
}
onMounted(() => {
  getMcc().then((res) => {
    mccResult.value = res.list
    mccList.value = [
      mccResult.value.map((item) => {
        return {
          value: item.value,
          label: item.text,
        }
      }),
    ]
  })
  getRegion().then((res) => {
    console.log(res)
    region.value = res
    regionList.value = [
      region.value.map((item) => {
        return {
          value: item.value,
          label: item.text,
        }
      }),
    ]
  })
})
</script>

<template>
  <wd-form ref="formRef" :model="formModel">
    <wd-cell-group border>
      <wd-input
        v-model="formModel.tpl_name"
        label="模板名称"
        :label-width="labelWidth"
        prop="tpl_name"
        clearable
        placeholder="给模版定义一个名称方便区分"
        :rules="[{ required: true, message: '请填写模板名称' }]"
      />
      <wd-picker
        v-model="formModel.mch_type"
        label="商户类型"
        placeholder="请选择"
        :label-width="labelWidth"
        prop="mch_type"
        :columns="mchTypeList"
        :rules="[{ required: true, message: '请填选择商户类型' }]"
      />
      <wd-input
        v-if="formModel.mch_type !== '1'"
        v-model="formModel.merchant_name"
        label="公司全称"
        :label-width="labelWidth"
        prop="merchant_name"
        clearable
        placeholder="公司全称"
        :rules="[{ required: true, message: '请填写公司全称' }]"
      />
      <wd-input
        v-model="formModel.merchant_short_name"
        :label="formModel.mch_type === '1' ? '店铺名称' : '公司简称'"
        :label-width="labelWidth"
        prop="merchant_short_name"
        clearable
        :placeholder="`${formModel.mch_type === '1' ? '店铺名称' : '公司简称'}，20字以内`"
        :rules="[{ required: true, message: `请填写${formModel.mch_type === '1' ? '店铺名称' : '公司简称'}` }]"
      />
      <view class="wot-tips">
        不能使用类似“饭店”、“电玩城”这样的泛称，应该带上名称。如：佳佳饭店、飞翔科技公司
      </view>
      <wd-input
        v-model="formModel.email"
        label="商户邮箱"
        :label-width="labelWidth"
        prop="email"
        clearable
        placeholder="商户邮箱"
        :rules="[{ required: true, message: '请填写商户邮箱' }]"
      />
      <wd-input
        v-model="formModel.contact_mobile"
        label="商户手机"
        :label-width="labelWidth"
        prop="contact_mobile"
        clearable
        placeholder="建议使用法人名下手机号"
        :rules="[{ required: true, message: '请填写商户手机' }]"
      />
      <wd-col-picker
        v-model="formModel.mcc_code_name"
        label="行业分类"
        :label-width="labelWidth"
        prop="mcc_code_name"
        placeholder="请选择"
        :columns="mccList"
        :display-format="displayFormat"
        :column-change="columnChange"
        :rules="[{ required: true, message: '请选择行业类型' }]"
      />
      <wd-input
        v-model="formModel.legal_name"
        label="法人姓名"
        :label-width="labelWidth"
        prop="legal_name"
        clearable
        placeholder="法人姓名"
        :rules="[{ required: true, message: '请填写法人姓名' }]"
      />
      <wd-input
        v-model="formModel.id_card_no"
        label="法人身份证号"
        :label-width="labelWidth"
        prop="id_card_no"
        clearable
        placeholder="法人身份证号"
        :rules="[{ required: true, message: '请填写法人身份证号' }]"
      />
      <wd-datetime-picker
        v-model="formModel.id_card_start"
        prop="id_card_start"
        type="date"
        label="证件有效期始"
        placeholder="身份证有效期开始日期"
        :default-value="Date.now()"
        :rules="[{ required: true, message: '请选择证件有效期始' }]"
      />
      <wd-cell
        prop="threshold"
        title="证件有效期止"
        required
        title-width="100px"
        clearable
        :rules="[{ required: true, message: '请选择证件有效期止' }]"
        custom-class="cell-custom"
      >
        <view class="card-end">
          <view v-if="!longTime" class="flex-1">
            <wd-datetime-picker
              v-model="formModel.id_card_end"
              prop="id_card_end"
              type="date"
              clearable
              placeholder="身份证有效期结束日期"
              :default-value="Date.now()"
              custom-cell-class="card-end-picker"
            />
          </view>
          <view v-else class="flex items-center justify-between py-20rpx">
            <span class="pr-10rpx">长期</span><wd-icon name="error-fill" size="12px" @click="longTime = !longTime" />
          </view>
          <wd-tag plain @click="longTime = !longTime">
            长期有效
          </wd-tag>
        </view>
      </wd-cell>
      <wd-col-picker
        v-model="areaList"
        label="经营地区"
        placeholder="请选择"
        :label-width="labelWidth"
        prop="areaList"
        :columns="regionList"
        :display-format="displayFormat"
        :column-change="changeArea"
        :rules="[{ required: true, message: '请选择经营地区' }]"
      />
      <wd-input
        v-model="formModel.address"
        label="经营地址"
        :label-width="labelWidth"
        prop="address"
        clearable
        placeholder="不用写地区"
        :rules="[{ required: true, message: '请填写法人姓名' }]"
      />
      <wd-picker
        v-model="formModel.account_type"
        label="银行账户类型"
        placeholder="请选择"
        :label-width="labelWidth"
        prop="account_type"
        :columns="accountTypeList"
        :rules="[{ required: true, message: '请填选择银行账户类型' }]"
      />
      <wd-input
        v-model="formModel.bank_card_no"
        label="结算银行卡号"
        :label-width="labelWidth"
        prop="bank_card_no"
        clearable
        placeholder="需与银行卡照片上的一致"
        :rules="[{ required: true, message: '请填写结算银行卡号' }]"
      />
      <wd-input
        v-model="formModel.holder"
        label="开户名"
        :label-width="labelWidth"
        prop="holder"
        clearable
        placeholder="需要与法人姓名相同"
        :rules="[{ required: true, message: '请填写开户名' }]"
      />
      <view class="wot-tips">
        个人账户填银行卡户主姓名，公司账号填营业执照上的企业名称
      </view>
      <wd-input
        v-model="formModel.license_full_name"
        label="营业执照名称"
        :label-width="labelWidth"
        prop="license_full_name"
        clearable
        placeholder="营业执照名称"
        :rules="[{ required: true, message: '请填写营业执照名称' }]"
      />
      <view class="wot-tips">
        个体营业执照如无名称，可填“个体户XXX”（执照上姓名）
      </view>
      <wd-input
        v-model="formModel.license"
        label="营业执照注册号"
        :label-width="labelWidth"
        prop="license"
        clearable
        placeholder="营业执照注册号"
        :rules="[{ required: true, message: '请填写营业执照注册号' }]"
      />
      <wd-input
        v-model="formModel.license_address"
        label="执照注册地址"
        :label-width="labelWidth"
        prop="license_address"
        clearable
        placeholder="执照注册地址"
        :rules="[{ required: true, message: '请填写执照注册地址' }]"
      />
      <wd-datetime-picker
        v-model="formModel.license_start"
        prop="license_start"
        type="date"
        label="执照开始日期"
        placeholder="执照开始日期"
        :default-value="Date.now()"
        :rules="[{ required: true, message: '请选择执照开始日期' }]"
      />
      <wd-cell
        prop="license_end"
        title="执照结束日期"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请选择执照结束日期' }]"
        custom-class="cell-license-end"
      >
        <view class="card-end">
          <view v-if="!licenseLongTime" class="flex-1">
            <wd-datetime-picker
              v-model="formModel.license_end"
              type="date"
              :border="false"
              clearable
              placeholder="执照结束日期"
              :default-value="Date.now()"
              custom-cell-class="card-end-picker"
            />
          </view>
          <view v-else class="flex items-center justify-between py-20rpx">
            <span class="pr-10rpx">长期</span><wd-icon name="error-fill" size="12px" @click="licenseLongTime = !licenseLongTime" />
          </view>
          <wd-tag plain @click="licenseLongTime = !licenseLongTime">
            长期有效
          </wd-tag>
        </view>
      </wd-cell>
      <wd-cell
        prop="license_pic"
        title="营业执照照片"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传营业执照照片' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="idcard_front_pic"
        title="法人身份证正面照"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传法人身份证正面照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="idcard_back_pic"
        title="法人身份证背面照"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传法人身份证背面照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="idcard_hand_pic"
        title="法人手持身份证照"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传法人手持身份证照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="bank_card_front_pic"
        title="结算银行卡正面照(如是对公账户则传开户许可证照片)"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传结算银行卡正面照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="door_pic"
        title="经营场所门头照"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传经营场所门头照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="inside_pic"
        title="经营场所内设照"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传经营场所内设照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
      <wd-cell
        prop="cashier_desk_pic"
        title="收银台照"
        required
        :title-width="labelWidth"
        clearable
        :rules="[{ required: true, message: '请上传收银台照' }]"
        custom-class="cell-custom"
      >
        <upload />
      </wd-cell>
    </wd-cell-group>

    <view class="btn-outer-pd">
      <wd-button type="primary" size="small" block @click="handleSubmit">
        提交
      </wd-button>
    </view>
  </wd-form>
</template>

<style lang="scss" scoped>
.wd-form{
    padding: 20rpx;
    padding-left: 0;
    background-color: #fff;
}
.cell-label{
    padding: 20px 0;
}
::v-deep(){
    .card-end-picker{
        padding: 0;
    }
    .wd-cell__wrapper{
        padding:10px 0;
    }
    .wd-picker__value-wraper{
        text-align: left;
    }
    .wd-picker.is-border .wd-picker__cell::after{
      height: 0;
    }

}
.card-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer{
  margin-left: 20rpx;
  padding: 40rpx;
  padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
}
</style>
